import React, { useEffect, useState } from 'react';
import { useLocation,NavLink, useNavigate } from 'react-router-dom'
import {Descriptions,Button,Modal,message} from 'antd'
import { ExclamationCircleFilled } from '@ant-design/icons'
import {deleteDoctor,doctorDetail,getOfOrg,getOfTeam,getDoctorRole,getOrglist,getMngtable} from '../../../../api/Datas'
import './DoctorDetail.scss'
interface Props {

}
const { confirm } = Modal;
function DoctorDetail(props: Props) {
    var navigate = useNavigate()
    var location = useLocation()
    var [option, setOption] = useState([])
    var [ofteam, setOfteam] = useState([])
    var [role, setRole] = useState([])
    var [obj, setObj] = useState<any>({})

    useEffect(() => {
        getDocDetail()
        getManagerList()
        doctorRole()
        getteamlist()
    }, [])

    // 获取医生详情
    var getDocDetail = async()=>{
        var res = await doctorDetail({id:location.state.doctorId})
        console.log(res)
        if(res.data.code==200){
            setObj(res.data.data)
        }

    }
      // 获取所属机构下拉框
      var getManagerList = async()=>{
        var res = await getOrglist()
        var arr = res.data.data.map((item: any) => {
            return { value: item.mechanismId, label: item.mechanismName }
        })
        setOption(arr)
    }
    // 获取所属团队列表
    var getteamlist = async () => {
        var res = await getMngtable()
        console.log(res)
        var arr = res.data.data[0].map((item: any) => {
            return { value: item.teamId, label: item.teamName }
        })
        setOfteam(arr)
    }
      // 点击删除
      const showConfirm=()=>{
        confirm({
            title: '删除确认',
            icon: <ExclamationCircleFilled />,
            content: '医生信息删除后无法恢复，确定删除吗？',
            okText:"确认",
            cancelText:"取消",
            onOk() {
                deleteDoctor({id:obj.doctorId}).then((res:any)=>{
                    if(res.data.code == 200){
                        message.success({content:'删除成功'})
                            navigate(-1)
                    }
                }) 
            },
            onCancel() {
              console.log('已取消');
            },
          });
    }
    // 获取医生角色
    var doctorRole = async () => {
        var res = await getDoctorRole()
        var arr = res.data.map((item: any) => {
            return { value: item.id, label: item.name }
        })
        setRole(arr)
    }
    return (
        <div className='doctordetail'>
            <div className="title">
                <div className='leftborder'></div>
                <h3>医生详情</h3>
            </div>
            <h4>医生信息</h4>
           <div className="box">
           <Descriptions column={3}>
                <Descriptions.Item label="医生编号">{obj.doctorId}</Descriptions.Item>
                <Descriptions.Item label="医生姓名">{obj.doctorName}</Descriptions.Item>
                <Descriptions.Item label="联系电话">{obj.doctorTel}</Descriptions.Item>
                <Descriptions.Item label="医生头像"><img src={obj.doctorImg} /> </Descriptions.Item>
                <Descriptions.Item label="所属机构">{option.length!==0&&option.map((item:any)=>item.value==obj.mechanismId&&item.label)}</Descriptions.Item>
                <Descriptions.Item label="所属团队"> {ofteam.length!==0&&ofteam.map((item:any)=>item.value==obj.teamId&&item.label)} </Descriptions.Item>
            </Descriptions>
                <Descriptions column={1}> 
                <Descriptions.Item label="性别">{obj.doctorSex?'女':'男'}</Descriptions.Item>
                <Descriptions.Item label="医生角色">{role.length!==0&&role.map((item:any)=>item.value==obj.roleId&&item.label)}</Descriptions.Item>
                <Descriptions.Item label="医生简介">{obj.doctorIntroduce}</Descriptions.Item> 
                <Descriptions.Item label="医生擅长">{obj.doctorGoodat}</Descriptions.Item>
                <Descriptions.Item label="账号状态">
                    <span style={{color:obj.doctorState?"#3bd73b":"#ff4343"}}>{obj.doctorState?'启用中':'未启用'} </span>
                </Descriptions.Item>
            </Descriptions>
           </div>
           <div className="footer">
           <NavLink className='pen' to='/index/datas-doctor-adddoctor' state={{record:obj,type:'handle'}}><Button type="primary">编辑医生信息</Button></NavLink>
           <Button type='primary' danger  onClick={()=>{showConfirm()}}>删除</Button>
           <Button onClick={()=>{navigate(-1)}}>返回</Button>
           </div>
        </div>
    );
}

export default DoctorDetail;